<template>
  <view class="container">
    <Card class="card" v-for="item in list" :key="item.circleID" :detail="item" />
  </view>
</template>

<script setup>
  import Card from '../components/card.vue'
  import { GetCircleByUser } from '@/apis/circle.js'
  import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
  import { ref } from 'vue'

  const list = ref()

  function refresh() {
    GetCircleByUser().then((res) => {
      list.value = res.data
    })
  }

  onPullDownRefresh(async () => {
    await refresh()
    await uni.stopPullDownRefresh()
  })

  onShow(() => {
    refresh()
  })
</script>

<style lang="scss" scoped>
  .container {
    padding: 0 20rpx;

    .card {
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>
